<template>
	<view class="register">
		<view class="register_form">
			<view class="register_form_item">
				<input class="register_form_item_input" v-model="username" focus placeholder="请输入手机号码"
					placeholder-style="font-size:24upx;color:#b1b1b1;" />
			</view>
			<view class="register_form_item">
				<input type="password" v-model="password" class="register_form_item_input" placeholder="请输入密码"
					placeholder-style="font-size:24upx;color:#b1b1b1;" />
			</view>
			<view class="register_form_item">
				<input type="password" v-model="repassword" class="register_form_item_input" placeholder="请再次输入密码"
					placeholder-style="font-size:24upx;color:#b1b1b1;" />
			</view>
			<view class="register_form_item">
				<input class="register_form_item_input" v-model="nickname" focus placeholder="请输入昵称"
					placeholder-style="font-size:24upx;color:#b1b1b1;" />
			</view>
			<view class="register_form_item">
				<input class="register_form_item_input" v-model="email" focus placeholder="请输入邮箱"
					placeholder-style="font-size:24upx;color:#b1b1b1;" />
			</view>
			<view class="register_form_item">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="brithday" @change="changeLog" />
			</view>
			<view>
				<label class="radio">
					<radio value="gender" :checked="gender==='1'" @click="changeGender('1')" />男
				</label>
				<label class="radio">
					<radio value="gender" :checked="gender==='2'" @click="changeGender('0')" />女
				</label>
			</view>
		</view>
		<view class="register_btn">
			<button type="primary" @click="doRegister">立即注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		register
	} from '../../api/user.js'
	let username = ref('') // 用户名
	let password = ref('') // 密码
	let repassword = ref('') // 重新输入密码
	let nickname = ref('') // 昵称
	let email = ref('') // 邮箱
	let brithday = ref('') // 生日日期
	let gender = ref('1') // 性别

	onMounted(() => {
		console.log(11111)

	})
	// 选择性别
	const changeGender = (value) => {
		gender.value = value
	}
	// 生日日期时间改变
	const changeLog = (value) => {
		console.log(value)
		brithday.value = value
	}

	// 注册成功 1秒后跳转到登录页，失败的话提示注册失败的原因，停留在注册页。
	const doRegister = () => {
		if (password.value !== repassword.value) {
			uni.showToast({
				icon: "error",
				title: "密码不匹配"
			})
			return
		}
		let data = {
			username: username.value,
			password: password.value,
			nickname: nickname.value,
			email: email.value,
			brithday: brithday.value,
			gender: gender.value,
			employee: '0'
		}
		register(data).then(res => {
			// console.log(res, 1111)
			let {
				code,
				msg
			} = res;
			if (code == 200) {
				uni.showToast({
					icon: 'success',
					title: msg,
					duration: 1000

				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1000)

			}
		}).catch(err => {
			let {
				data
			} = err
			uni.showToast({
				icon: 'fail',
				title: data,
				duration: 2000

			});
		})
	}
</script>

<style lang="scss">
	.register {
		padding: 20px;
		overflow: hidden;

		&_form {
			margin-top: 40upx;

			&_item {
				margin-bottom: 30upx;

				&_input {
					border: 1px solid #e1e1e1;
					height: 70upx;
					border-radius: 5upx;
					padding-left: 10upx;
					background: #fff;
				}
			}
		}

		&_btn {
			margin-top: 100upx;

			button[type=primary] {
				background-color: #17adf0;
			}
		}

		.radio {
			margin-right: 20upx;
		}
	}
</style>
